<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车型报价</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/select.css">
    <link rel="stylesheet" href="/css/baojia.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <script src="/js/swiper.min.js"></script>
    <script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <header class="header">
        <script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script src="/js/s3Slider.js" type="text/javascript"></script>
        <div class="header_top">
            <div class="header_top_content">
                <div class="logo"><img src="/assets/logo.png" width="120"></div>
                <div class="link">
                    <a href="/baojia.html" class="link_cell">
                        <p class="link_name">车型报价</p>
                        <img src="/assets/link_3.png" height="30">
                    </a>
                    <a href="/zhibao.html" class="link_cell">
                        <p class="link_name">质保查询</p>
                        <img src="/assets/link_4.png" height="30">
                    </a>
                    <a href="/example.html" class="link_cell">
                        <p class="link_name">案例展示</p>
                        <img src="/assets/link_2.png" width="30">
                    </a>
                    <a href="/shigong.html" class="link_cell">
                        <p class="link_name">施工指导</p>
                        <img src="/assets/link_1.png" height="30">
                    </a>
                </div>
            </div>
        </div>
        <div class="header_bottom">
            <!-- <img src="/assets/header_bottom.png" width="100%"> -->
            <div id="slider">
                <ul id="sliderContent">
                    <li class="sliderImage">
                    <img src="/assets/header_bottom.png" width="100%">
                    <span class="bottom"></span>
                    </li>
                    <li class="sliderImage">
                    <img src="/assets/header_bottom_1.png" width="100%">
                    <span class="bottom"></span>
                    </li>
                    <div class="clear sliderImage"></div>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider img').first().load(function(e){
                    $('#sliderContent').height(this.height) 
                });
                $('#slider').s3Slider({
                    timeOut: 3000
                });
            });
        </script>
    </header>
    <div class="baojia">
        <h4 class="baojia_title">车型报价</h4>
        <div class="baojia_content">
            <h4 class="baojia_car_select_title">1.选择品牌</h4>
            <div class="baojia_car_select">
                <div class="swiper-car-select">
                    <div class="baojia_car_select_wrap" id="baojia_car_select_wrap">
                        <!-- 展开按钮 -->
                        <div class="baojia_car_select_btn_more" onclick="expand()">
                            <p id="baojia_car_select_btn_more_txt">展开</p>
                            <img src="/assets/baojia_arrow.png" alt="">
                        </div>
                        <!-- 品牌列表 -->
                        <div class="baojia_car_select_wrap_fixed">
                            <div class="baojia_car_select_cell active" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                            <div class="baojia_car_select_cell" onclick="carSelect(this)">
                                <div class="baojia_car_select_cell_wrap">
                                    <img src="/assets/baojia_select_car.png" width="90">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 940px; margin: 20px auto 0; min-height: 610px;">
                <!-- 选择车型 -->
                <div class="baojia_type_select" style="min-height: 480px;">
                    <h4 class="baojia_type_select_title">2.选择车型</h4>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">CC</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">尚酷</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">高尔夫</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">途观</a>
                    <a class="baojia_type_select_cell active" onclick="typeSelect(this)">途昂</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">高尔夫</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">CC</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">尚酷</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">高尔夫</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">途观</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">途昂</a>
                    <a class="baojia_type_select_cell" onclick="typeSelect(this)">高尔夫</a>
                </div>
                <!-- 选择车部位 -->
                <div class="baojia_part_select bjcontent">
                    <div class="bjc">
                        <div class="car"></div>
                        <div class="carpart">
                            <div class="cart cheding show"><img src="/assets/baojia/part-cheding.png"></div>
                            <div class="cart chegai show"><img src="/assets/baojia/part-chegai.png"></div>
                            <div class="cart hougai show"><img src="/assets/baojia/part-hougai.png"></div>
                            <div class="cart hougan show"><img src="/assets/baojia/part-hougan.png"></div>
                            <div class="cart houshijing show"><img src="/assets/baojia/part-houshijing.png"></div>
                            <div class="cart zuoqianyzb show"><img src="/assets/baojia/part-zuoqianyzb.png"></div>
                            <div class="cart qiangan show"><img src="/assets/baojia/part-qiangan.png"></div>
                            <div class="cart youqianyzb show"><img src="/assets/baojia/part-youqianyzb.png"></div>
                            <div class="cart youcequn show"><img src="/assets/baojia/part-youcequn.png"></div>
                            <div class="cart youhouyzb show"><img src="/assets/baojia/part-youhouyzb.png"></div>
                            <div class="cart youmenzuhe show"><img src="/assets/baojia/part-youmenzuhe.png"></div>
                            <div class="cart zhyzb show"><img src="/assets/baojia/part-zhyzb.png"></div>
                            <div class="cart zuocequn show"><img src="/assets/baojia/part-zuocequn.png"></div>
                            <div class="cart zuomenzuhe show"><img src="/assets/baojia/part-zuomenzuhe.png"></div>
                        </div>
                        <div class="carline">
                            <div class="cline zheng active"><img src="/assets/baojia/line1.png"></div>
                            <div class="cline cheding active"><img src="/assets/baojia/line-cheding.png"></div>
                            <div class="cline chegai active"><img src="/assets/baojia/line-chegai.png"></div>
                            <div class="cline hougai active"><img src="/assets/baojia/line-hougai.png"></div>
                            <div class="cline hougan active"><img src="/assets/baojia/line-hougan.png"></div>
                            <div class="cline houshijing active"><img src="/assets/baojia/line-houshijing.png"></div>
                            <div class="cline zuoqianyzb active"><img src="/assets/baojia/line-zuoqianyzb.png"></div>
                            <div class="cline qiangan active"><img src="/assets/baojia/line-qiangan.png"></div>
                            <div class="cline youqianyzb active"><img src="/assets/baojia/line-youqianyzb.png"></div>
                            <div class="cline youcequn active"><img src="/assets/baojia/line-youcequn.png"></div>
                            <div class="cline youhouyzb active"><img src="/assets/baojia/line-youhouyzb.png"></div>
                            <div class="cline youmenzuhe active"><img src="/assets/baojia/line-youmenzuhe.png"></div>
                            <div class="cline zhyzb active"><img src="/assets/baojia/line-zhyzb.png"></div>
                            <div class="cline zuocequn active"><img src="/assets/baojia/line-zuocequn.png"></div>
                            <div class="cline zuomenzuhe active"><img src="/assets/baojia/line-zuomenzuhe.png"></div>
                            <div class="cline neishi active"><img src="/assets/baojia/line-neishi.png"></div>
                        </div>
                        <div class="carzi">
                            <div data-sid="zheng" class="carz zheng active"><img src="/assets/baojia/zheng.png"></div>
                            <div data-sid="cheding" class="carz cheding active"><img src="/assets/baojia/cheding.png"></div>
                            <div data-sid="chegai" class="carz chegai active"><img src="/assets/baojia/chegai.png"></div>
                            <div data-sid="hougai" class="carz hougai active"><img src="/assets/baojia/hougai.png"></div>
                            <div data-sid="hougan" class="carz hougan active"><img src="/assets/baojia/hougan.png"></div>
                            <div data-sid="houshijing" class="carz houshijing active"><img src="/assets/baojia/houshijing.png"></div>
                            <div data-sid="zuoqianyzb" class="carz zuoqianyzb active"><img src="/assets/baojia/leftyeziban.png"></div>
                            <div data-sid="qiangan" class="carz qiangan active"><img src="/assets/baojia/qiangan.png"></div>
                            <div data-sid="youqianyzb" class="carz youqianyzb active"><img src="/assets/baojia/rightyeziban.png"></div>
                            <div data-sid="youcequn" class="carz youcequn active"><img src="/assets/baojia/youcequn.png"></div>
                            <div data-sid="youhouyzb" class="carz youhouyzb active"><img src="/assets/baojia/youhouyzb.png"></div>
                            <div data-sid="youmenzuhe" class="carz youmenzuhe active"><img src="/assets/baojia/youmenzuhe.png"></div>
                            <div data-sid="zhyzb" class="carz zhyzb active"><img src="/assets/baojia/zhyzb.png"></div>
                            <div data-sid="zuocequn" class="carz zuocequn active"><img src="/assets/baojia/zuocequn.png"></div>
                            <div data-sid="zuomenzuhe" class="carz zuomenzuhe active"><img src="/assets/baojia/zuomenzuhe.png"></div>
                            <div data-sid="neishi" class="carz neishi active"><img src="/assets/baojia/neishi.png"></div>
                        </div>
                    </div>
                </div>
                <!-- 选择年份 -->
                <div class="baojia_year_select" style="min-height: 480px;">
                    <h4 class="baojia_year_select_title">2.选择年份</h4>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2008</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2009</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2010</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2011</a>
                    <a class="baojia_year_select_cell active" onclick="yearSelect(this)">2012</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2013</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2014</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2015</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2016</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2017</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2018</a>
                    <a class="baojia_year_select_cell" onclick="yearSelect(this)">2019</a>
                </div>
            </div>
        </div>
        <!-- 价格 -->
        <div class="baojia_part_select_price">
            <h4 class="baojia_part_select_car_name">大众汽车</h4>
            <p id="select_car_part_all" class="select_car_part_all"></p>
            <div class="baojia_part_select_price_total">
                共：￥<span id="select_price_total">3285.0</span>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-phone">
                <img class="footer-phone-icon" src="/assets/footer_phone.png" alt="">
                <p class="footer-phone-name">全国热线</p>
                <p class="footer-phone-number">400-600-2900</p>
            </div>
            <div class="footer-info">
                <p>粤ICP备09064614号    备案编号：11010502002098</p>
                <p>COPYRIGHT (©) 2019 中凌薄膜材料科技（上海）有限公司  版权所有</p>
            </div>
            <div class="footer-qrcode">
                <img src="/assets/footer_qrcode.png">
                <p style="text-align: center; margin-top: 5px;">扫一扫,关注公众号</p>
            </div>
            <div class="footer-logo">
                <img src="/assets/footer_logo.png">
            </div>
        </div>
    </footer>
    <script>
        // 展开品牌
        function expand () {
            var domWrap = document.getElementById('baojia_car_select_wrap')
            var classNamesWrap = domWrap.getAttribute('class').split(' ')
            var domBtnTxt = document.getElementById('baojia_car_select_btn_more_txt')
            if (classNamesWrap.indexOf('fixed') > -1) {
                domWrap.setAttribute('class', classNamesWrap.filter(i => i!== 'fixed').join(' '))
                domBtnTxt.innerText = '展开'
            } else {
                domWrap.setAttribute('class', classNamesWrap.join(' ') + ' fixed')
                domBtnTxt.innerText = '收起'
            }
        }
    </script>
    <script>
        // 选择车品牌
        function carSelect (e) {
            var classNames = e.getAttribute('class').split(' ')
            if (classNames.indexOf('active') === -1) {
                var elementTypes = document.getElementsByClassName('baojia_car_select_cell')
                for (var index = 0; index < elementTypes.length; index++) {
                    var element = elementTypes[index];
                    var elementClassNames = element.getAttribute('class').split(' ')
                    if (elementClassNames.indexOf('active') > -1) {
                        element.setAttribute('class', elementClassNames.filter(i => i!== 'active').join(' '))
                    }
                }
                e.setAttribute('class', classNames.join(' ') + ' active')
            }
        }

        // 选择车型
        function typeSelect (e) {
            var classNames = e.getAttribute('class').split(' ')
            if (classNames.indexOf('active') === -1) {
                var elementTypes = document.getElementsByClassName('baojia_type_select_cell')
                for (var index = 0; index < elementTypes.length; index++) {
                    var element = elementTypes[index];
                    var elementClassNames = element.getAttribute('class').split(' ')
                    if (elementClassNames.indexOf('active') > -1) {
                        element.setAttribute('class', elementClassNames.filter(i => i!== 'active').join(' '))
                    }
                }
                e.setAttribute('class', classNames.join(' ') + ' active')
            }
        }

        // 选择年份
        function yearSelect (e) {
            var classNames = e.getAttribute('class').split(' ')
            if (classNames.indexOf('active') === -1) {
                var elementTypes = document.getElementsByClassName('baojia_year_select_cell')
                for (var index = 0; index < elementTypes.length; index++) {
                    var element = elementTypes[index];
                    var elementClassNames = element.getAttribute('class').split(' ')
                    if (elementClassNames.indexOf('active') > -1) {
                        element.setAttribute('class', elementClassNames.filter(i => i!== 'active').join(' '))
                    }
                }
                e.setAttribute('class', classNames.join(' ') + ' active')
            }
        }

    </script>
    <script>
        var car_t = {
            'zheng':{
                'title':'整车',
                'price':15800,
                'iconpic':'/lib/eimg/baojia/car_z.png'
            },
            'cheding':{
                'title':'车顶',
                'price':1307,
                'iconpic':'/lib/eimg/baojia/car_cd.png'
            },
            'hougai':{
                'title':'后盖套装',
                'price':1307,
                'iconpic':'/lib/eimg/baojia/car_hgtz.png'
            },
            'hougan':{
                'title':'后杠',
                'price':1742,
                'iconpic':'/lib/eimg/baojia/car_hg.png'
            },
            'houshijing':{
                'title':'后视镜',
                'price':600,
                'iconpic':'/lib/eimg/baojia/car_hsj.png'
            },
            'chegai':{
                'title':'车盖',
                'price':1829,
                'iconpic':'/lib/eimg/baojia/car_jg.png'
            },
            'qiangan':{
                'title':'前杠',
                'price':1742,
                'iconpic':'/lib/eimg/baojia/car_qg.png'
            },
            'youcequn':{
                'title':'右侧裙',
                'price':652,
                'iconpic':'/lib/eimg/baojia/car_ycq.png'
            },
            'youhouyzb':{
                'title':'右后叶子板',
                'price':2089,
                'iconpic':'/lib/eimg/baojia/car_yhyzb.png'
            },
            'youmenzuhe':{
                'title':'右门组合',
                'price':1567,
                'iconpic':'/lib/eimg/baojia/car_ymzh.png'
            },
            'youqianyzb':{
                'title':'右前叶子板',
                'price':915,
                'iconpic':'/lib/eimg/baojia/car_yqyzb.png'
            },
            'zuocequn':{
                'title':'左侧裙',
                'price':652,
                'iconpic':'/lib/eimg/baojia/car_zcq.png'
            },
            'zhyzb':{
                'title':'左后叶子板',
                'price':2089,
                'iconpic':'/lib/eimg/baojia/car_zhyzb.png'
            },
            'zuomenzuhe':{
                'title':'左门组合',
                'price':1567,
                'iconpic':'/lib/eimg/baojia/car_zmzh.png'
            },
            'zuoqianyzb':{
                'title':'左前叶子板',
                'price':915,
                'iconpic':'/lib/eimg/baojia/car_zqyzb.png'
            },
            'neishi':{
                'title':'内饰',
                'price':1000,
                'iconpic':'/lib/eimg/baojia/car_ns.png'
            }
        }
        var _totlaprice = 0;
        var isinit = 0;
        var is_z = 1;
        var s_part= 0; //多选的个数
        var is_add = 1;
        var selectPart = [] // 已选择车部位

        $(function(){
            getPrice()

            $('.carz').click(function(){
                var sid = $(this).data('sid');
                if(sid == 'zheng'){
                    //整车
                    isinit = 0;
                    is_z = 1;
                    s_part = 0;
                    is_add = 1;
                    _totlaprice = 0;
                    selectall();
                }else{
                    if(is_z != 1){
                        if($(this).hasClass("active")){
                            s_part -= 1;
                            if(s_part == 0){
                                $('.carzi .zheng').trigger('click');
                                return false;
                            }
                            delitem(sid);
                            is_add = 0;
                        }else{
                            s_part += 1;
                            if(s_part == 14){
                                $('.carzi .zheng').trigger('click');
                                return false;
                            }
                            additem(sid);
                            is_add = 1;
                        }
                    }else{
                        additem(sid);
                        is_add = 1;
                        s_part+=1;
                    }

                    //这里可以通过ajax获取真实的汽车本部分的价格，替换car_t[sid]['price']
                    if(is_add == 1){
                        selectPart.push(car_t[sid])
                    }else{
                        selectPart = selectPart.filter(i => i!== car_t[sid])
                    }
                }

                getPrice()
            });

            function additem(sid){
                cinit();
                isinit = 1;
                if(is_z == 1){
                    is_z = 0;
                }
                $('.carzi .'+sid).addClass('active');
                $('.carline .'+sid).addClass('active');
                $('.carpart .'+sid).addClass('show');
            }

            function delitem(sid){
                $('.carzi .'+sid).removeClass('active');
                $('.carline .'+sid).removeClass('active');
                $('.carpart .'+sid).removeClass('show');
            }

            function cinit(){
                if(isinit == 0){
                    $('.carz').each(function(index, element) {
                        $(this).removeClass('active');
                    });
                    $('.cline').each(function(index, element) {
                        $(this).removeClass('active');
                    });
                    $('.cart').each(function(index, element) {
                        $(this).removeClass('show');
                    });
                }
            }
            function selectall(){
                $('.carz').each(function(index, element) {
                    $(this).addClass('active');
                });
                $('.cline').each(function(index, element) {
                    $(this).addClass('active');
                });
                $('.cart').each(function(index, element) {
                    $(this).addClass('show');
                });
                selectPart = []
            }

            // 计算已选部位价格
            function getPrice () {
                var elementName = document.getElementById('select_car_part_all')
                var elementPrice = document.getElementById('select_price_total')
                
                if (selectPart.length === 0) {
                    elementName.innerText = '整车'
                    elementPrice.innerText = car_t['zheng'].price
                } else {
                    var price = 0
                    for (var index = 0; index < selectPart.length; index++) {
                        price += selectPart[index].price
                    }
                    elementName.innerText = selectPart.map(i => i.title).join(' + ')
                    elementPrice.innerText = price
                }
            }
        })
    </script>
</body>
</html>